<template>
	<div class="cont">
		<van-popup v-model="show" round position="bottom" class="setting" @close="handleClose" :safe-area-inset-bottom="true">
			<div class="text-bold text-center font-16 m-b-10 p-t-10">自定义跟群设置</div>
			<div class="setting-content">
				<div class="module m-b-10">
					<div class="flex align-center justify-between m-b-10">
						<span class="rela font-16 text-bold module-title">转链设置</span>
					</div>
					<div class="font-11 color-9">默认开启转链状态，关闭后为纯净模式，跟发原来未转链的链接</div>
					<div class="m-t-10">
						<div class="flex justify-between">
							<div class="text-bold">开启转链设置</div>
							<van-switch size="20" v-model="isImg"></van-switch>
						</div>
					</div>
				</div>
				<div class="module m-b-10">
					<div class="flex align-center justify-between m-b-10">
						<span class="rela font-16 text-bold module-title">关键词替换设置</span>
						<div class="flex justify-center align-center module-btn font-12" @click="handleClickAdd">
							<van-icon name="plus"></van-icon>
							<span>新增</span>
						</div>
					</div>
					<div class="font-11 color-9">将需要替换的关键词分别填入文本左右两侧文本框，可设置多组</div>
					<div class="keyword-box">
						<div class="flex align-center m-b-5 k-item" v-for="(item, index) in keywordList" :key="index">
							<div class="m-r-10 k-item__inp">
								<van-field v-model="item.text" placeholder="关键词" clearable></van-field>
							</div>
							<span class="m-r-10 k-item__text">替换为</span>
							<div class="m-r-10 k-item__inp">
								<van-field v-model="item.newText" placeholder="关键词" clearable></van-field>
							</div>
							<van-icon name="delete" class="color-red" @click="handleClickDel(index)"></van-icon>
						</div>
					</div>
				</div>
				<div class="module m-b-10">
					<div class="flex align-center justify-between m-b-10">
						<span class="rela font-16 text-bold module-title">过滤设置</span>
					</div>
					<div class="m-b-10 sensitive-box radius4">
						<div class="font-16 text-bold m-b-10">敏感词过滤设置</div>
						<div class="font-11 color-9 m-b-10">敏感/不需要的词汇，跟发时自动过滤</div>
						<van-field class="radius4 m-b-10" type="textarea" placeholder="多个词汇用逗号分割"></van-field>
						<div class="flex justify-between">
							<div class="flex align-center">
								<span>过滤整段</span>
								<van-icon name="question-o" @click="handleHelp" />
							</div>
							<van-switch size="20" v-model="isAll"></van-switch>
						</div>
					</div>
					<div class="m-b-10 sensitive-box radius4">
						<div class="flex justify-between">
							<div>过滤图片</div>
							<van-switch size="20" v-model="isImg"></van-switch>
						</div>
					</div>
					<div class="m-b-10 sensitive-box radius4">
						<div class="flex justify-between">
							<div>过滤表情包</div>
							<van-switch size="20" v-model="isEmoji"></van-switch>
						</div>
					</div>
				</div>
				<van-button block type="info" round>保存设置</van-button>
			</div>
		</van-popup>
	</div>
</template>
<script>
import {Popup, Button, Field, Switch, Dialog} from 'vant'
export default {
	components: {
		[Popup.name]: Popup,
		[Button.name]: Button,
		[Field.name]: Field,
		[Switch.name]: Switch,
		[Dialog.name]: Dialog
	},
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		id: {
			type: [String, Number],
			default: ''
		},
		itemData: {
			type: Object,
			default: () => ({})
		}
	},
	data () {
		return {
			show: this.isShow,
			isAll: false,
			isImg: false,
			isEmoji: false,
			keywordList: [{
				id: 1,
				text: '454',
				newText: '7878'
			}, {
				id: 25,
				text: '454',
				newText: '7878'
			}],
			setData: {}
		}
	},
	mounted () {
		this.setData = this.$common.deepClone(this.itemData)
	},
	methods: {
		// 新增关键词
		handleClickAdd () {
			this.keywordList.push({
				text: '',
				newText: ''
			})
		},
		// 移除关键词
		handleClickDel (index) {
			this.keywordList.splice(index, 1)
		},
		handleHelp () {
			Dialog.alert({
				message: '这里有好几行说明文案\n这里有好几行说明文案\n这里有好几行说明文案',
				confirmButtonText: '我知道了'
			}).then(res => {})
		},
		handleClose () {
			this.$emit('close')
		}
	}
}
</script>
<style lang="less" scoped>
.setting {
	background: #f5f5f5;
	box-sizing: border-box;
	&-content {
		padding: 0 10px 10px;
		max-height: 500px;
		overflow-y: auto;
		
		.module {
			border-radius: 6px;
			padding: 10px 10px;
			background: #ffffff;
			&-title {
				position: relative;
				&:after {
					content: '';
					position: absolute;
					width: 16px;
					height: 16px;
					bottom: -2px;
					right: -6px;
					background: rgba(137,153,241,.3);
					border-radius: 50%;
				}
			}
			&-btn {
				padding: 5px 15px;
				background: #f5f5f5;
				border-radius: 4px;
			}
			// 关键词设置
			.keyword-box {
				padding: 10px 0 0;
				.k-item {
					
					&__inp {
						width: 100px;
						padding: 5px 8px;
						background: #f5f5f5;
						border-radius: 4px;
						::v-deep .van-cell {
							padding: 0;
							background: transparent;
						}
					}
				}
			}
			// 敏感词设置
			.sensitive-box {
				padding: 10px;
				background: #f5f5f5;
			}
		}
	}
}
</style>